<template>
  <el-table
    :data="
      tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    "
    style="width: 100%"
  >
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="title" label="楼盘名称" width="180" />
    <el-table-column prop="type" label="房源类型" width="180" />
    <el-table-column prop="num" label="门牌号" width="180" />
    <el-table-column prop="hometype" label="房源户型" width="180" />
    <el-table-column prop="name" label="户主" />
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          修改数据
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:currentPage="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[10, 15, 30, 50, 100]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableData.length"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <UpdataList></UpdataList>
</template>
  
<script lang="ts" setup>
import { inject, ref } from "vue";
import apiUrl from "../../api/urls";
import link from "../../api/link";
import { ElMessage, ElMessageBox } from "element-plus";
import UpdataList from "../../components/UpdataList.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

//全局状态
const store = useStore();

interface User {
  id: number;
  title: string;
  type: string;
  num: string;
  hometype: string;
  name: string;
}
//inject
const reload = inject("reload");

//路由
const router = useRouter();
//用户数据
const tableData = ref<User[]>([]);
//页数
const currentPage4 = ref(1);
//每页数量
const pageSize4 = ref(15);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

//请求数据
(async () => {
  link(apiUrl.userlist).then((res: any) => {
    // console.log(res);
    tableData.value = res.data;
  });
})();

//在哪一页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageSize4.value = val;
};
//每页的数据数量
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage4.value = val;
};

//修改数据
const handleEdit = (index: number, row: User) => {
  console.log(index, row.id);
  store.commit("changeform", true);
  store.commit("changedata", row.id);
};
//删除数据
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
  link(apiUrl.userlist + "/" + row.id, "DELETE").then((res) => {
    console.log(res);
    router.go(0);
  });
};
</script>
  
